<template>
    <div class="menu">
        <div class="menu-header">
            <van-search v-model="value" shape="round" background="#fbfbfb" @focus="golink('Search')"
                placeholder="请输入搜索关键词" />
            <div class="menu-nav">
                <div class="nav-item" v-for="(item,index) in menuOptions"
                    @click="toggleNav(index,item.typeDesc,item.type)">
                    <img :src="index==Navindex?item.activeIcon:item.inactiveIcon" alt="111">
                    <div class="nav-title" :class="index==Navindex?['active']:''">{{item.title}}</div>
                </div>
            </div>
        </div>
        <div class="menu-list">
            <div class="list-item" v-for="(item,index) in productslist" @click="goDetail(item.pid)">
                <img class="item-img" :src="item.smallImg" alt="item.name">
                <div class="item-name">
                    <div class="zhname">{{item.name}}</div>
                    <div class="enname">{{item.enname}}</div>
                </div>
                <div class="item-price">￥{{item.price}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import '../assets/scss/Menu.scss';

    export default {
        name: 'Menu',
        data() {
            return {
                testimg: 'http://www.kangliuyong.com:10002/images/product_large/IMG_0390_02.jpg',
                value: '',
                Navindex: 0,
                menuOptions: [{
                        title: "推荐",
                        inactiveIcon: require("../assets/images/icons_09.gif"),
                        activeIcon: require("../assets/images/icons_21.gif"),
                        type: 1,
                        typeDesc: 'isHot'
                    },
                    {
                        title: "拿铁",
                        inactiveIcon: require("../assets/images/icons_05.gif"),
                        activeIcon: require("../assets/images/icons_19.gif"),
                        type: 'latte',
                        typeDesc: '拿铁'
                    },
                    {
                        title: "咖啡",
                        inactiveIcon: require("../assets/images/icons_03.gif"),
                        activeIcon: require("../assets/images/icons_18.gif"),
                        type: 'coffee',
                        typeDesc: '咖啡'
                    },
                    {
                        title: "瑞纳冰",
                        inactiveIcon: require("../assets/images/icons_07.gif"),
                        activeIcon: require("../assets/images/icons_20.gif"),
                        type: 'rena_ice',
                        typeDesc: '瑞纳冰'
                    },
                ],
                productslist: [],
                productType: []
            }
        },
        created() {
            this.getGoodData('isHot', 1);
        },
        methods: {
            toggleNav(index, k, v) {
                this.Navindex = index;
                this.getGoodData(k, v);
            },
            golink(name) {
                this.$router.push({
                    name
                });
            },
            // 跳转至详细页面
            goDetail(pid) {
                console.log('goggo');
                this.$router.push({
                    name: 'Detail',
                    params: {
                        pid
                    }
                });
            },
            // 获取商品类型
            getGoodType() {
                this.axios({
                    method: 'GET',
                    url: '/type',
                    params: {
                        appkey: this.appkey
                    }
                }).then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                })
            },
            // 根据商品类型获取数据
            getGoodData(k, v) {
                let key = null;
                let value = null;
                if (k == "isHot") {
                    key = k;
                    value = 1
                } else {
                    key = 'type';
                    value = v
                }
                this.$toast.loading('加载中...');
                // console.log(key,value)
                this.axios({
                    method: 'GET',
                    url: '/typeProducts',
                    params: {
                        appkey: this.appkey,
                        key,
                        value
                    }
                }).then(res => {
                    // console.log(res);
                    if (res.data.code === 200 || res.data.code === 500) {
                        this.productslist = res.data.result;
                        this.$toast.clear();
                    }

                }).catch(err => {
                    console.log(err);
                })
            }

        },
    }
</script>
<style>
</style>